<template>
  <div class="register">
    <!-- 顶部 -->
    <div class="main-t">
      <!-- 导航栏 -->
      <div class="banner">
        <van-nav-bar>
          <template #left>
            <van-icon name="arrow-left" color="black" @click="back" />
          </template>
        </van-nav-bar>
      </div>
    </div>
    <!-- 中部 -->
    <div class="main-c">
      <div class="tag">注册你的账号吧</div>
      <div class="register-input">
        <div class="register-input-box">
          <van-cell-group inset>
            <van-field v-model="name" clearable placeholder="昵称" maxlength="15" />
          </van-cell-group>
        </div>
        <div class="register-input-box">
          <van-cell-group inset>
            <van-field v-model="username" clearable placeholder="账号" maxlength="15" />
          </van-cell-group>
        </div>
        <div class="register-input-box">
          <van-cell-group inset>
            <van-field v-model="password" clearable type="password" placeholder="密码" maxlength="15" />
          </van-cell-group>
        </div>
        <div class="register-input-box">
          <van-cell-group inset>
            <van-field v-model="rePassword" clearable type="password" placeholder="重复密码" maxlength="15" />
          </van-cell-group>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="main-b">
      <div class="fixedBtn" @click="register()">注册</div>
    </div>
  </div>
</template>

<script setup lang="ts" name="register">
// 登录页面
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
function back() {
  router.go(-1)
}

let name = ref("")
let username = ref("")
let password = ref("")
let rePassword = ref("")

function login() {
  console.log('登录')
}

function register() {
  router.push('/register')
  console.log('注册')
}

</script>

<style scoped lang="less">
@gabelMargin : 30px; // 全局margin
@gabelBgColor : rgb(181, 202, 161);
@garyFontColor : rgb(125, 125, 125);
@grayBgColor: rgb(240, 240, 240);

.register {
  height: 100vh;
}

.main-c {
  margin: @gabelMargin;

  .tag {
    font-size: 50px;
    margin-bottom: 60px;
  }
}

.register-input-box {
  margin: 25px -15px;
}

.van-cell {
  background-color: @grayBgColor;
  border-radius: 50px;

  ::placeholder {
    color: gray;
  }
}

.fixedBtn {
  position: relative;
  margin-top: 60px;
}
</style>